<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav kui-flex-row-none">
        <BreadcrumbItem>我的工作台</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-head kui-flex kui-flex-between kui-flex-middle">
      <div class="kui-head-item kui-flex-row-none kui-flex kui-flex-middle user-info">
        <div class="info">
          <div class="big">
            <span>{{ $store.state.userInfo.name }}，祝你开心工作每一天！</span>
          </div>
          <div class="small">
            <span>账号：{{ $store.state.userInfo.account }}</span>
            <span>电话号码：{{ $store.state.userInfo.phone }}</span>
          </div>
        </div>
      </div>
      <div class="kui-flex-row-none kui-count-group">
        <div class="kui-group-item">
          <Button class="kui-act-btn" type="primary" @click="$router.push({path:'/lease'})">租赁开单</Button>
        </div>
        <div class="kui-group-item">
          <Button class="kui-act-btn" type="primary" @click="$router.push({path:'/map'})">展位展示</Button>
        </div>
      </div>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section kui-flex kui-flex-wrap">
        <div class="kui-flex-row-12">
          <div class="kui-section-item">
            <Spin fix v-if="countData === undefined"></Spin>
            <div class="kui-item-hd">
              <span class="kui-hd-title">展位统计</span>
            </div>
            <div class="kui-item-bd">
              <div class="kui-count-group">
                <div class="kui-group-item">
                  <div class="kui-item-label">所有展位</div>
                  <div class="kui-item-value">
                    <nuxt-link :to="{path:'/booth'}">{{ countData.all }}</nuxt-link>
                  </div>
                </div>
                <div class="kui-group-item">
                  <div class="kui-item-label">空闲展位</div>
                  <div class="kui-item-value">
                    <nuxt-link :to="{path:'/booth',query: {state: 1}}">{{ countData.free }}</nuxt-link>
                  </div>
                </div>
                <div class="kui-group-item">
                  <div class="kui-item-label">预定展位</div>
                  <div class="kui-item-value">
                    <nuxt-link :to="{path:'/booth',query: {state: 3}}">{{ countData.reserve }}</nuxt-link>
                  </div>
                </div>
                <div class="kui-group-item">
                  <div class="kui-item-label">使用展位</div>
                  <div class="kui-item-value">
                    <nuxt-link :to="{path:'/booth',query: {state: 2}}">{{ countData.used }}</nuxt-link>
                  </div>
                </div>
                <div class="kui-group-item">
                  <div class="kui-item-label">异常展位</div>
                  <div class="kui-item-value">
                    <nuxt-link :to="{path:'/booth',query: {state: -1}}">{{ countData.repair }}</nuxt-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kui-flex-row-12">
          <div class="kui-section-item">
            <Spin fix v-if="todoData === undefined"></Spin>
            <div class="kui-item-hd">
              <span class="kui-hd-title">订单提醒</span>
            </div>
            <div class="kui-item-bd">
              <div class="kui-count-group">
                <div class="kui-group-item">
                  <div class="kui-item-label">待上新</div>
                  <div class="kui-item-value" >
                     <nuxt-link :to="{path:'/order',query: {mode: 1}}">{{ todoData.new }}</nuxt-link>
                  </div>
                </div>
                <div class="kui-group-item">
                  <div class="kui-item-label">7天到期</div>
                  <div class="kui-item-value">
                    <nuxt-link :to="{path:'/order',query: {mode: 4}}">{{ todoData.due}}</nuxt-link>
                  </div>
                </div>
                <div v-if="todoData.msg !== undefined" class="kui-group-item">
                  <div class="kui-item-label">短信剩余条数</div>
                  <div class="kui-item-value">
                    <span>{{ todoData.msg}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="kui-flex-row-24">
          <div class="kui-section-item">
            <Spin fix v-if="logsData === undefined"></Spin>
            <div class="kui-item-hd">
              <span class="kui-hd-title">系统动态</span>
            </div>
            <div class="kui-item-bd">
                <Timeline>
                  <TimelineItem v-for="(item, index) in logsData" :key="index">
                      <p class="time">{{item.time}}</p>
                      <p class="handler">操作人员：{{item.handler}}</p>
                      <p class="content">{{item.content}}</p>
                  </TimelineItem>
                </Timeline>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 初始化数据
  data() {
    return {
      countData: {}, //展位统计
      todoData: {},  //展位提醒（当前用户）
      logsData: [],  //系统动态（所有）
      logsTitle: [
        {
          title: '操作时间',
          key: 'time',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '操作人员',
          key: 'handler',
          align: 'center',
          ellipsis: 'true'
        },
        {
          title: '操作内容',
          key: 'content',
          align: 'center',
          ellipsis: 'true'
        },
      ]
      
    }
  },
  // 页面方法
  methods: {
    // 获取工作台数据
    async getPageData() {
      const app = this
      let { data } = await app.$axios.get('/user/v1/desk')
      if (data.code === 100) {
        app.countData = data.result.count
        app.todoData = data.result.todo
        app.logsData = data.result.logs
        
      }
    }
  },
  // 生命周期
  created() {
    this.getPageData()
  }
}
</script>

<style lang="less" scoped>
// 变量定义
@boxRange: 24px;

@defaultColor: #1890FF;
@fontColor: #333333;
@backColor: #f0f2f5;

@borderColor: #e8e8e8;
@borderRadius: 2px;

a {
  color: #333;
}
.user-info {
  .avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin-right: @boxRange / 2;
    border: 1px solid #eeeeee;
  }
  .info {
    .big {
      font-size: 18px;
      line-height: 2;
      font-weight: 500;
    }
    .small {
      font-size: 14px;
      line-height: 1.6;
      color: lighten(@fontColor, 45%);
      span+span {
        margin-left: @boxRange / 2;
      }
    }
  }
}
.yj-notice {
  .yj-notice-item {
    border-color: transparent !important;
  }
}
.yj-logs {
  padding: @boxRange / 2 0;
}

</style>
